<template>
	<view>
		<view class="zjc-rb">
			<uni-swiper-dot :info="sencery.scImages" :current="current" field="content" mode="default">
				<swiper class="swiper-box" @change="change" autoplay="true" interval="3000">
					<swiper-item v-for="(item ,index) in sencery.scImages" :key="index">
						<image style="width: 750rpx; height: 500rpx;" :src="item" alt="" mode="aspectFill">
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="ticket-main">
			<view class="ticket-desc">
				<view class="desc-header">
					<view class="sc-title">
						<text style="font-size: 40rpx; font-weight: 700;">{{sencery.scName}}</text>
					</view>
					<view class="sc-time" style="margin-left: 30rpx;">
						<uni-icons type="eye" size="15" ></uni-icons>
						<text style="font-size: 25rpx; margin-left: 10rpx;">开放时间:  {{sencery.scTime}}</text>
					</view>
					<view class="sc-adress">
						<uni-icons type="location" size="20" ></uni-icons>

						<text style="font-size: 25rpx; margin-left: 10rpx;">
							<text style="font-weight: 700; margin-right:20rpx; font-size: 30rpx;">景区地址</text> 
							{{sencery.scAdress}}
						</text>
					</view>
					<view class="sc-phone">
						<uni-icons type="phone" size="20" ></uni-icons>
						<text style="font-size: 25rpx; margin-left: 10rpx;">
							<text style="font-weight: 700; margin-right:20rpx; font-size: 30rpx;">联系电话</text> 
							{{sencery.scPhone}}
						</text>
					</view>
				</view>
				<view class="desc-main">
					<view style="width: 100%; margin-bottom:30rpx ;">
						<text style="font-size: 40rpx; font-weight: 700; margin-left: 20rpx;">景区介绍</text>
					</view>
					<view style="width: 90%; margin: 0 auto; padding-bottom: 10rpx;">
						<text v-html="sencery.scDatail">
							
						</text>
					</view>
				</view>
			</view>
			
			<view class="ticket-buy">
				<view style="border-bottom:  #edededf1 solid 1px;">
					<text style="font-size: 40rpx; font-weight: 700; margin-left: 25rpx;">门票</text>
				</view>
				<view class="ticket-item" v-for="(item,index) in sencery.ticketTypes" :key="index">
					<view>
						<p>{{item.typeName}}</p>
						<p style="font-size: 22rpx; color: gray; margin-top: 15rpx;">快速出票</p>
						<p style="font-size: 22rpx; color: gray; margin-top: 15rpx; margin-bottom: 10rpx;">有效期为游玩当天</p>
					</view>
					<view style="margin-right: 15rpx;">
						<p style="margin-bottom: 10rpx; font-size: 20rpx; text-align: center;"><text style="font-size: 30rpx; color: #ff6f0f; font-weight: ;">¥{{ parseInt(sencery.scPrice*item.sale)}}</text>起</p>
						<p style="margin-right: 20rpx;">
							<fui-button radius="30rpx" btnSize="mini" style="height: 50rpx;" background="#ff6f0f" @click="toTicketOrder(item.typeId,parseInt(sencery.scPrice*item.sale))">立即预订</fui-button>
						</p>
					</view>
				</view>
				<view style="width: 100%; height: 150rpx; max-width: 100%;">
					<view style=" margin-top: 140rpx; margin-left: 250rpx; position: absolute; bottom:30rpx;">
						<text style="font-size: 26rpx;">我也是有底线的</text>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import fuiButton from "@/components/firstui/fui-button/fui-button.vue"
	export default {
		components:{
			fuiButton
		},
		data() {
			return {
				current:1,
				sencery:{
					scId:'1',
					scName:'数据库对应景点名',
					scAdress:'数据库对应景点地址',
					scTime:'8:00-17:00',
					scPhone:"12345678910",
					scDatail:'碧水瀑布景点是景区内最壮观的瀑布之一，水流湍急，从高山崖壁上飞流直下，溅起的水花如碧玉般闪闪发光，令人叹为观止。',
					scPrice:100,
					scImages: ["../../static/rb1.jpg",
						 
					
							'../../static/rb2.jpg'
						, 
						
							'../../static/rb3.jpg'
					],
					ticketTypes:[
						{
							typeId:1,
							typeName:"成人票",
							sale:2
						},
						{
							typeId:2,
							typeName:"儿童票",
							sale:1
						},
						{
							typeId:3,
							typeName:"学生票",
							sale:1.5
						},
						
					],
				}
			}
		},
		onLoad(options){
			this.sencery.scId = options.scid
			console.log(options.scid)
			this.init(options.scid)
		},
		methods: {
			change(e){
				this.current = e.detail.current
			},
			toTicketOrder(typeId,price){
				uni.navigateTo({
					url:"/pages/ticket-order/ticket-order?scId="+this.sencery.scId+"&typeId="+typeId+"&scName="+this.sencery.scName+"&price="+price
				})
			},
			init(scId){
				this.request({
					
					url:"/scenery/detail",
					method:"GET",
					data:{
						scId:scId
					}
				}).then(res=>{
					if(res.code==='1'){
						this.sencery = res.data;
					}
				}).catch(()=>{
					uni.showToast({
						icon:'error',
						title:'服务异常'
					})
				})
			}
		}
	}
</script>

<style scoped>
.zjc-rb {
		width: 100%;
		height: 500rpx;
		margin: 0 0;
}
.swiper-box{
		width: 100%;
		height: 500rpx;
}
.ticket-buy {
	margin-top: 30rpx;
	background-color: #fff;
	
}
.ticket-item {
	display: flex;
	justify-content: space-between;
	margin-top: 25rpx;
	margin-left: 25rpx;
	border-bottom: #edededf1 solid 1px;
}
.ticket-main {
	position: absolute;
	top:450rpx;
	width:100%;
	background-color: #f7f7f7f7;
	border-radius: 30rpx;
}
.desc-header {
	width: 100%;
	height: 350rpx;
	border-radius: 30rpx;
	background-color: #fff;
}
.desc-header view {
	padding-top: 25rpx;
	margin-left: 25rpx;
	border-bottom: #f1f1f1f1 solid 1px;
}
.desc-main {
	width: 100%;
	margin-top: 20rpx;
	background-color: #fff;
	border-radius: 30rpx;
}
</style>
